<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4536016" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">061_选中</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101a9;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#x101a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101aa;</span>
                <div class="name">火热</div>
                <div class="code-name">&amp;#x101aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101ab;</span>
                <div class="name">记录</div>
                <div class="code-name">&amp;#x101ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101ac;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#x101ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101ad;</span>
                <div class="name">休闲</div>
                <div class="code-name">&amp;#x101ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101ae;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#x101ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101af;</span>
                <div class="name">首页2</div>
                <div class="code-name">&amp;#x101af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">接口</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">大数据</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">查看日志</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">数据源</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">表输出</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">工程</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">运行流程</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">模型训练</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">关系型</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">数据建模</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">机器学习</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">交通</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">exit03</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">exit02</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">clear</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">组</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">delate</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">horn</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe807;</span>
                <div class="name">0-Caution</div>
                <div class="code-name">&amp;#xe807;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe808;</span>
                <div class="name">0-Check</div>
                <div class="code-name">&amp;#xe808;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe809;</span>
                <div class="name">0-Close</div>
                <div class="code-name">&amp;#xe809;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80e;</span>
                <div class="name">1-Add</div>
                <div class="code-name">&amp;#xe80e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80f;</span>
                <div class="name">1-Attention</div>
                <div class="code-name">&amp;#xe80f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe810;</span>
                <div class="name">1-Clear</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe811;</span>
                <div class="name">1-Download</div>
                <div class="code-name">&amp;#xe811;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe812;</span>
                <div class="name">1-Remove</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81d;</span>
                <div class="name">2-Delete</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81e;</span>
                <div class="name">2-Email</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe822;</span>
                <div class="name">2-Lock Off</div>
                <div class="code-name">&amp;#xe822;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe823;</span>
                <div class="name">2-Image</div>
                <div class="code-name">&amp;#xe823;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe824;</span>
                <div class="name">2-Lock ON</div>
                <div class="code-name">&amp;#xe824;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82c;</span>
                <div class="name">3-Cloud download</div>
                <div class="code-name">&amp;#xe82c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe832;</span>
                <div class="name">3-iSettings</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe843;</span>
                <div class="name">4-ATM</div>
                <div class="code-name">&amp;#xe843;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84a;</span>
                <div class="name">4-Network</div>
                <div class="code-name">&amp;#xe84a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84b;</span>
                <div class="name">4-Refresh</div>
                <div class="code-name">&amp;#xe84b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84c;</span>
                <div class="name">4-Return</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84d;</span>
                <div class="name">4-Send</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84e;</span>
                <div class="name">4-Transfer</div>
                <div class="code-name">&amp;#xe84e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c2;</span>
                <div class="name">注意</div>
                <div class="code-name">&amp;#xe8c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c3;</span>
                <div class="name">正确</div>
                <div class="code-name">&amp;#xe8c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c4;</span>
                <div class="name">账户</div>
                <div class="code-name">&amp;#xe8c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c8;</span>
                <div class="name">邮件</div>
                <div class="code-name">&amp;#xe8c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cd;</span>
                <div class="name">验证</div>
                <div class="code-name">&amp;#xe8cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d6;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe8d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e3;</span>
                <div class="name">企业</div>
                <div class="code-name">&amp;#xe8e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e9;</span>
                <div class="name">解锁</div>
                <div class="code-name">&amp;#xe8e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f2;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe8f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f8;</span>
                <div class="name">不可见</div>
                <div class="code-name">&amp;#xe8f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f9;</span>
                <div class="name">常见问题</div>
                <div class="code-name">&amp;#xe8f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">ic_prompt@1x</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">ic_gift_collection@1x</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">ic_system@1x</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">delivery</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">基础资料</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">规则配置</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">数据分析</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">系统管理</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">通知公告</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">值班监测</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">值班人员</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">工作台</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">查岗记录</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">查岗统计</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">单位信息</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">故障分析</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">故障事件</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">监测事件</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">监测数据</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">漏报事件</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">视频管理</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">物联管理</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">消防水源</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">消控室查岗</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">隐患分析</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">隐患事件</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">真实火警事件</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">值班分析</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">报警分析</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">报警事件</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">建筑信息</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">消防警力</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">消控室管理</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">消防证核实（预警）</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">来电记录</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">值班事件</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">BB信号灯具</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">AB模拟监控</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">DA视频检测</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">DB微波</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">HC KVM</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">办公配套</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">IB打印机</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">中心平台</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">061_笔记本</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">061_档案-21</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">061_发现</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">061_更多</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">061_编辑-20</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">061_购物-12</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">061_监控</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">061_建筑-17</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">061_喇叭</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73f;</span>
                <div class="name">061_书本</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">061_收藏-23</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">061_金币</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">061_广播</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">061_书签</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">061_商品</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">061_书写</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">061_地图</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">061_数据-09</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe748;</span>
                <div class="name">061_通道</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe749;</span>
                <div class="name">061_网络</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">061_快递</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">061_文件</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">061_休闲</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">061_我的-27</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">061_消息</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">061_信件</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe750;</span>
                <div class="name">061_探索</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1715066677800') format('woff2'),
       url('iconfont.woff?t=1715066677800') format('woff'),
       url('iconfont.ttf?t=1715066677800') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_xuanzhong"></span>
            <div class="name">
              061_选中
            </div>
            <div class="code-name">.icon-a-061_xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huore"></span>
            <div class="name">
              火热
            </div>
            <div class="code-name">.icon-huore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jilu"></span>
            <div class="name">
              记录
            </div>
            <div class="code-name">.icon-jilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuan"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.icon-huiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiuxian"></span>
            <div class="name">
              休闲
            </div>
            <div class="code-name">.icon-xiuxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-xinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye2"></span>
            <div class="name">
              首页2
            </div>
            <div class="code-name">.icon-shouye2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiekou"></span>
            <div class="name">
              接口
            </div>
            <div class="code-name">.icon-jiekou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dashuju"></span>
            <div class="name">
              大数据
            </div>
            <div class="code-name">.icon-dashuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chakanrizhi"></span>
            <div class="name">
              查看日志
            </div>
            <div class="code-name">.icon-chakanrizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuyuan"></span>
            <div class="name">
              数据源
            </div>
            <div class="code-name">.icon-shujuyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoshuchu"></span>
            <div class="name">
              表输出
            </div>
            <div class="code-name">.icon-biaoshuchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongcheng"></span>
            <div class="name">
              工程
            </div>
            <div class="code-name">.icon-gongcheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunhangliucheng"></span>
            <div class="name">
              运行流程
            </div>
            <div class="code-name">.icon-yunhangliucheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moxingxunlian"></span>
            <div class="name">
              模型训练
            </div>
            <div class="code-name">.icon-moxingxunlian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanxixing"></span>
            <div class="name">
              关系型
            </div>
            <div class="code-name">.icon-guanxixing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujujianmo"></span>
            <div class="name">
              数据建模
            </div>
            <div class="code-name">.icon-shujujianmo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiqixuexi"></span>
            <div class="name">
              机器学习
            </div>
            <div class="code-name">.icon-jiqixuexi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaotong"></span>
            <div class="name">
              交通
            </div>
            <div class="code-name">.icon-jiaotong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.icon-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exit03"></span>
            <div class="name">
              exit03
            </div>
            <div class="code-name">.icon-exit03
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exit02"></span>
            <div class="name">
              exit02
            </div>
            <div class="code-name">.icon-exit02
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sort"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.icon-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-map"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.icon-map
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clear"></span>
            <div class="name">
              clear
            </div>
            <div class="code-name">.icon-clear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zu"></span>
            <div class="name">
              组
            </div>
            <div class="code-name">.icon-zu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delate"></span>
            <div class="name">
              delate
            </div>
            <div class="code-name">.icon-delate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-horn"></span>
            <div class="name">
              horn
            </div>
            <div class="code-name">.icon-horn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-0-Caution"></span>
            <div class="name">
              0-Caution
            </div>
            <div class="code-name">.icon-a-0-Caution
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-0-Check"></span>
            <div class="name">
              0-Check
            </div>
            <div class="code-name">.icon-a-0-Check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-0-Close"></span>
            <div class="name">
              0-Close
            </div>
            <div class="code-name">.icon-a-0-Close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-1-Add"></span>
            <div class="name">
              1-Add
            </div>
            <div class="code-name">.icon-a-1-Add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-1-Attention"></span>
            <div class="name">
              1-Attention
            </div>
            <div class="code-name">.icon-a-1-Attention
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-1-Clear"></span>
            <div class="name">
              1-Clear
            </div>
            <div class="code-name">.icon-a-1-Clear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-1-Download"></span>
            <div class="name">
              1-Download
            </div>
            <div class="code-name">.icon-a-1-Download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-1-Remove"></span>
            <div class="name">
              1-Remove
            </div>
            <div class="code-name">.icon-a-1-Remove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-2-Delete"></span>
            <div class="name">
              2-Delete
            </div>
            <div class="code-name">.icon-a-2-Delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-2-Email"></span>
            <div class="name">
              2-Email
            </div>
            <div class="code-name">.icon-a-2-Email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-2-LockOff"></span>
            <div class="name">
              2-Lock Off
            </div>
            <div class="code-name">.icon-a-2-LockOff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-2-Image"></span>
            <div class="name">
              2-Image
            </div>
            <div class="code-name">.icon-a-2-Image
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-2-LockON"></span>
            <div class="name">
              2-Lock ON
            </div>
            <div class="code-name">.icon-a-2-LockON
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-3-Clouddownload"></span>
            <div class="name">
              3-Cloud download
            </div>
            <div class="code-name">.icon-a-3-Clouddownload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-3-iSettings"></span>
            <div class="name">
              3-iSettings
            </div>
            <div class="code-name">.icon-a-3-iSettings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-4-ATM"></span>
            <div class="name">
              4-ATM
            </div>
            <div class="code-name">.icon-a-4-ATM
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-4-Network"></span>
            <div class="name">
              4-Network
            </div>
            <div class="code-name">.icon-a-4-Network
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-4-Refresh"></span>
            <div class="name">
              4-Refresh
            </div>
            <div class="code-name">.icon-a-4-Refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-4-Return"></span>
            <div class="name">
              4-Return
            </div>
            <div class="code-name">.icon-a-4-Return
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-4-Send"></span>
            <div class="name">
              4-Send
            </div>
            <div class="code-name">.icon-a-4-Send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-4-Transfer"></span>
            <div class="name">
              4-Transfer
            </div>
            <div class="code-name">.icon-a-4-Transfer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuyi"></span>
            <div class="name">
              注意
            </div>
            <div class="code-name">.icon-zhuyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhengque"></span>
            <div class="name">
              正确
            </div>
            <div class="code-name">.icon-zhengque
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhanghu"></span>
            <div class="name">
              账户
            </div>
            <div class="code-name">.icon-zhanghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjian"></span>
            <div class="name">
              邮件
            </div>
            <div class="code-name">.icon-youjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanzheng"></span>
            <div class="name">
              验证
            </div>
            <div class="code-name">.icon-yanzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiye"></span>
            <div class="name">
              企业
            </div>
            <div class="code-name">.icon-qiye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuo"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">.icon-jiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bukejian"></span>
            <div class="name">
              不可见
            </div>
            <div class="code-name">.icon-bukejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changjianwenti"></span>
            <div class="name">
              常见问题
            </div>
            <div class="code-name">.icon-changjianwenti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-ic_prompt1x"></span>
            <div class="name">
              ic_prompt@1x
            </div>
            <div class="code-name">.icon-a-ic_prompt1x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-ic_gift_collection1x"></span>
            <div class="name">
              ic_gift_collection@1x
            </div>
            <div class="code-name">.icon-a-ic_gift_collection1x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-ic_system1x"></span>
            <div class="name">
              ic_system@1x
            </div>
            <div class="code-name">.icon-a-ic_system1x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delivery"></span>
            <div class="name">
              delivery
            </div>
            <div class="code-name">.icon-delivery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichuziyuanshuju"></span>
            <div class="name">
              基础资料
            </div>
            <div class="code-name">.icon-jichuziyuanshuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guizepeizhi"></span>
            <div class="name">
              规则配置
            </div>
            <div class="code-name">.icon-guizepeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianceshujufenxi"></span>
            <div class="name">
              数据分析
            </div>
            <div class="code-name">.icon-jianceshujufenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitongguanli"></span>
            <div class="name">
              系统管理
            </div>
            <div class="code-name">.icon-xitongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxitongzhi"></span>
            <div class="name">
              通知公告
            </div>
            <div class="code-name">.icon-xiaoxitongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibanjiankongguanli"></span>
            <div class="name">
              值班监测
            </div>
            <div class="code-name">.icon-zhibanjiankongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibanrenyuanguanli"></span>
            <div class="name">
              值班人员
            </div>
            <div class="code-name">.icon-zhibanrenyuanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongzuotai"></span>
            <div class="name">
              工作台
            </div>
            <div class="code-name">.icon-gongzuotai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chagangjilu"></span>
            <div class="name">
              查岗记录
            </div>
            <div class="code-name">.icon-chagangjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chagangtongji"></span>
            <div class="name">
              查岗统计
            </div>
            <div class="code-name">.icon-chagangtongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danweixinxi"></span>
            <div class="name">
              单位信息
            </div>
            <div class="code-name">.icon-danweixinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhangfenxi"></span>
            <div class="name">
              故障分析
            </div>
            <div class="code-name">.icon-guzhangfenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhangshijian"></span>
            <div class="name">
              故障事件
            </div>
            <div class="code-name">.icon-guzhangshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianceshijian"></span>
            <div class="name">
              监测事件
            </div>
            <div class="code-name">.icon-jianceshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianceshuju"></span>
            <div class="name">
              监测数据
            </div>
            <div class="code-name">.icon-jianceshuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loubaoshijian"></span>
            <div class="name">
              漏报事件
            </div>
            <div class="code-name">.icon-loubaoshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipinguanli"></span>
            <div class="name">
              视频管理
            </div>
            <div class="code-name">.icon-shipinguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wulianguanli"></span>
            <div class="name">
              物联管理
            </div>
            <div class="code-name">.icon-wulianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaofangshuiyuan"></span>
            <div class="name">
              消防水源
            </div>
            <div class="code-name">.icon-xiaofangshuiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaokongshichagang"></span>
            <div class="name">
              消控室查岗
            </div>
            <div class="code-name">.icon-xiaokongshichagang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinhuanfenxi"></span>
            <div class="name">
              隐患分析
            </div>
            <div class="code-name">.icon-yinhuanfenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinhuanshijian"></span>
            <div class="name">
              隐患事件
            </div>
            <div class="code-name">.icon-yinhuanshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhenshihuojingshijian"></span>
            <div class="name">
              真实火警事件
            </div>
            <div class="code-name">.icon-zhenshihuojingshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibanfenxi"></span>
            <div class="name">
              值班分析
            </div>
            <div class="code-name">.icon-zhibanfenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baojingfenxi"></span>
            <div class="name">
              报警分析
            </div>
            <div class="code-name">.icon-baojingfenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baojingshijian"></span>
            <div class="name">
              报警事件
            </div>
            <div class="code-name">.icon-baojingshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianzhuxinxi"></span>
            <div class="name">
              建筑信息
            </div>
            <div class="code-name">.icon-jianzhuxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaofangjingli"></span>
            <div class="name">
              消防警力
            </div>
            <div class="code-name">.icon-xiaofangjingli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaokongshiguanli"></span>
            <div class="name">
              消控室管理
            </div>
            <div class="code-name">.icon-xiaokongshiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-xiaofangzhengheshiyujing"></span>
            <div class="name">
              消防证核实（预警）
            </div>
            <div class="code-name">.icon-a-xiaofangzhengheshiyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-laidianjilu"></span>
            <div class="name">
              来电记录
            </div>
            <div class="code-name">.icon-laidianjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibanshijian"></span>
            <div class="name">
              值班事件
            </div>
            <div class="code-name">.icon-zhibanshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-BBxinhaodengju"></span>
            <div class="name">
              BB信号灯具
            </div>
            <div class="code-name">.icon-BBxinhaodengju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ABmonijiankong"></span>
            <div class="name">
              AB模拟监控
            </div>
            <div class="code-name">.icon-ABmonijiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DAshipinjiance"></span>
            <div class="name">
              DA视频检测
            </div>
            <div class="code-name">.icon-DAshipinjiance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DBweibo"></span>
            <div class="name">
              DB微波
            </div>
            <div class="code-name">.icon-DBweibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-HCKVM"></span>
            <div class="name">
              HC KVM
            </div>
            <div class="code-name">.icon-a-HCKVM
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangongpeitao"></span>
            <div class="name">
              办公配套
            </div>
            <div class="code-name">.icon-bangongpeitao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-IBdayinji"></span>
            <div class="name">
              IB打印机
            </div>
            <div class="code-name">.icon-IBdayinji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongxinpingtai"></span>
            <div class="name">
              中心平台
            </div>
            <div class="code-name">.icon-zhongxinpingtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_bijiben"></span>
            <div class="name">
              061_笔记本
            </div>
            <div class="code-name">.icon-a-061_bijiben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_dangan-21"></span>
            <div class="name">
              061_档案-21
            </div>
            <div class="code-name">.icon-a-061_dangan-21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_faxian"></span>
            <div class="name">
              061_发现
            </div>
            <div class="code-name">.icon-a-061_faxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_gengduo"></span>
            <div class="name">
              061_更多
            </div>
            <div class="code-name">.icon-a-061_gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_bianji-20"></span>
            <div class="name">
              061_编辑-20
            </div>
            <div class="code-name">.icon-a-061_bianji-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_gouwu-12"></span>
            <div class="name">
              061_购物-12
            </div>
            <div class="code-name">.icon-a-061_gouwu-12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_jiankong"></span>
            <div class="name">
              061_监控
            </div>
            <div class="code-name">.icon-a-061_jiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_jianzhu-17"></span>
            <div class="name">
              061_建筑-17
            </div>
            <div class="code-name">.icon-a-061_jianzhu-17
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_laba"></span>
            <div class="name">
              061_喇叭
            </div>
            <div class="code-name">.icon-a-061_laba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_shuben"></span>
            <div class="name">
              061_书本
            </div>
            <div class="code-name">.icon-a-061_shuben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_shoucang-23"></span>
            <div class="name">
              061_收藏-23
            </div>
            <div class="code-name">.icon-a-061_shoucang-23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_jinbi"></span>
            <div class="name">
              061_金币
            </div>
            <div class="code-name">.icon-a-061_jinbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_guangbo"></span>
            <div class="name">
              061_广播
            </div>
            <div class="code-name">.icon-a-061_guangbo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_shuqian"></span>
            <div class="name">
              061_书签
            </div>
            <div class="code-name">.icon-a-061_shuqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_shangpin"></span>
            <div class="name">
              061_商品
            </div>
            <div class="code-name">.icon-a-061_shangpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_shuxie"></span>
            <div class="name">
              061_书写
            </div>
            <div class="code-name">.icon-a-061_shuxie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_ditu"></span>
            <div class="name">
              061_地图
            </div>
            <div class="code-name">.icon-a-061_ditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_shuju-09"></span>
            <div class="name">
              061_数据-09
            </div>
            <div class="code-name">.icon-a-061_shuju-09
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_tongdao"></span>
            <div class="name">
              061_通道
            </div>
            <div class="code-name">.icon-a-061_tongdao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_wangluo"></span>
            <div class="name">
              061_网络
            </div>
            <div class="code-name">.icon-a-061_wangluo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_kuaidi"></span>
            <div class="name">
              061_快递
            </div>
            <div class="code-name">.icon-a-061_kuaidi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_wenjian"></span>
            <div class="name">
              061_文件
            </div>
            <div class="code-name">.icon-a-061_wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_xiuxian"></span>
            <div class="name">
              061_休闲
            </div>
            <div class="code-name">.icon-a-061_xiuxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_wode-27"></span>
            <div class="name">
              061_我的-27
            </div>
            <div class="code-name">.icon-a-061_wode-27
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_xiaoxi"></span>
            <div class="name">
              061_消息
            </div>
            <div class="code-name">.icon-a-061_xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_xinjian"></span>
            <div class="name">
              061_信件
            </div>
            <div class="code-name">.icon-a-061_xinjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-061_tansuo"></span>
            <div class="name">
              061_探索
            </div>
            <div class="code-name">.icon-a-061_tansuo
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_xuanzhong"></use>
                </svg>
                <div class="name">061_选中</div>
                <div class="code-name">#icon-a-061_xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huore"></use>
                </svg>
                <div class="name">火热</div>
                <div class="code-name">#icon-huore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jilu"></use>
                </svg>
                <div class="name">记录</div>
                <div class="code-name">#icon-jilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuan"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#icon-huiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiuxian"></use>
                </svg>
                <div class="name">休闲</div>
                <div class="code-name">#icon-xiuxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-xinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye2"></use>
                </svg>
                <div class="name">首页2</div>
                <div class="code-name">#icon-shouye2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiekou"></use>
                </svg>
                <div class="name">接口</div>
                <div class="code-name">#icon-jiekou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dashuju"></use>
                </svg>
                <div class="name">大数据</div>
                <div class="code-name">#icon-dashuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chakanrizhi"></use>
                </svg>
                <div class="name">查看日志</div>
                <div class="code-name">#icon-chakanrizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuyuan"></use>
                </svg>
                <div class="name">数据源</div>
                <div class="code-name">#icon-shujuyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoshuchu"></use>
                </svg>
                <div class="name">表输出</div>
                <div class="code-name">#icon-biaoshuchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongcheng"></use>
                </svg>
                <div class="name">工程</div>
                <div class="code-name">#icon-gongcheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunhangliucheng"></use>
                </svg>
                <div class="name">运行流程</div>
                <div class="code-name">#icon-yunhangliucheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moxingxunlian"></use>
                </svg>
                <div class="name">模型训练</div>
                <div class="code-name">#icon-moxingxunlian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanxixing"></use>
                </svg>
                <div class="name">关系型</div>
                <div class="code-name">#icon-guanxixing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujujianmo"></use>
                </svg>
                <div class="name">数据建模</div>
                <div class="code-name">#icon-shujujianmo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiqixuexi"></use>
                </svg>
                <div class="name">机器学习</div>
                <div class="code-name">#icon-jiqixuexi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaotong"></use>
                </svg>
                <div class="name">交通</div>
                <div class="code-name">#icon-jiaotong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#icon-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#icon-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exit03"></use>
                </svg>
                <div class="name">exit03</div>
                <div class="code-name">#icon-exit03</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exit02"></use>
                </svg>
                <div class="name">exit02</div>
                <div class="code-name">#icon-exit02</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sort"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#icon-sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-map"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#icon-map</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clear"></use>
                </svg>
                <div class="name">clear</div>
                <div class="code-name">#icon-clear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zu"></use>
                </svg>
                <div class="name">组</div>
                <div class="code-name">#icon-zu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delate"></use>
                </svg>
                <div class="name">delate</div>
                <div class="code-name">#icon-delate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-horn"></use>
                </svg>
                <div class="name">horn</div>
                <div class="code-name">#icon-horn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-0-Caution"></use>
                </svg>
                <div class="name">0-Caution</div>
                <div class="code-name">#icon-a-0-Caution</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-0-Check"></use>
                </svg>
                <div class="name">0-Check</div>
                <div class="code-name">#icon-a-0-Check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-0-Close"></use>
                </svg>
                <div class="name">0-Close</div>
                <div class="code-name">#icon-a-0-Close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-1-Add"></use>
                </svg>
                <div class="name">1-Add</div>
                <div class="code-name">#icon-a-1-Add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-1-Attention"></use>
                </svg>
                <div class="name">1-Attention</div>
                <div class="code-name">#icon-a-1-Attention</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-1-Clear"></use>
                </svg>
                <div class="name">1-Clear</div>
                <div class="code-name">#icon-a-1-Clear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-1-Download"></use>
                </svg>
                <div class="name">1-Download</div>
                <div class="code-name">#icon-a-1-Download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-1-Remove"></use>
                </svg>
                <div class="name">1-Remove</div>
                <div class="code-name">#icon-a-1-Remove</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-2-Delete"></use>
                </svg>
                <div class="name">2-Delete</div>
                <div class="code-name">#icon-a-2-Delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-2-Email"></use>
                </svg>
                <div class="name">2-Email</div>
                <div class="code-name">#icon-a-2-Email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-2-LockOff"></use>
                </svg>
                <div class="name">2-Lock Off</div>
                <div class="code-name">#icon-a-2-LockOff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-2-Image"></use>
                </svg>
                <div class="name">2-Image</div>
                <div class="code-name">#icon-a-2-Image</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-2-LockON"></use>
                </svg>
                <div class="name">2-Lock ON</div>
                <div class="code-name">#icon-a-2-LockON</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-3-Clouddownload"></use>
                </svg>
                <div class="name">3-Cloud download</div>
                <div class="code-name">#icon-a-3-Clouddownload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-3-iSettings"></use>
                </svg>
                <div class="name">3-iSettings</div>
                <div class="code-name">#icon-a-3-iSettings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-4-ATM"></use>
                </svg>
                <div class="name">4-ATM</div>
                <div class="code-name">#icon-a-4-ATM</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-4-Network"></use>
                </svg>
                <div class="name">4-Network</div>
                <div class="code-name">#icon-a-4-Network</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-4-Refresh"></use>
                </svg>
                <div class="name">4-Refresh</div>
                <div class="code-name">#icon-a-4-Refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-4-Return"></use>
                </svg>
                <div class="name">4-Return</div>
                <div class="code-name">#icon-a-4-Return</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-4-Send"></use>
                </svg>
                <div class="name">4-Send</div>
                <div class="code-name">#icon-a-4-Send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-4-Transfer"></use>
                </svg>
                <div class="name">4-Transfer</div>
                <div class="code-name">#icon-a-4-Transfer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuyi"></use>
                </svg>
                <div class="name">注意</div>
                <div class="code-name">#icon-zhuyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque"></use>
                </svg>
                <div class="name">正确</div>
                <div class="code-name">#icon-zhengque</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhanghu"></use>
                </svg>
                <div class="name">账户</div>
                <div class="code-name">#icon-zhanghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjian"></use>
                </svg>
                <div class="name">邮件</div>
                <div class="code-name">#icon-youjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanzheng"></use>
                </svg>
                <div class="name">验证</div>
                <div class="code-name">#icon-yanzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiye"></use>
                </svg>
                <div class="name">企业</div>
                <div class="code-name">#icon-qiye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuo"></use>
                </svg>
                <div class="name">解锁</div>
                <div class="code-name">#icon-jiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bukejian"></use>
                </svg>
                <div class="name">不可见</div>
                <div class="code-name">#icon-bukejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changjianwenti"></use>
                </svg>
                <div class="name">常见问题</div>
                <div class="code-name">#icon-changjianwenti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-ic_prompt1x"></use>
                </svg>
                <div class="name">ic_prompt@1x</div>
                <div class="code-name">#icon-a-ic_prompt1x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-ic_gift_collection1x"></use>
                </svg>
                <div class="name">ic_gift_collection@1x</div>
                <div class="code-name">#icon-a-ic_gift_collection1x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-ic_system1x"></use>
                </svg>
                <div class="name">ic_system@1x</div>
                <div class="code-name">#icon-a-ic_system1x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delivery"></use>
                </svg>
                <div class="name">delivery</div>
                <div class="code-name">#icon-delivery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichuziyuanshuju"></use>
                </svg>
                <div class="name">基础资料</div>
                <div class="code-name">#icon-jichuziyuanshuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guizepeizhi"></use>
                </svg>
                <div class="name">规则配置</div>
                <div class="code-name">#icon-guizepeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianceshujufenxi"></use>
                </svg>
                <div class="name">数据分析</div>
                <div class="code-name">#icon-jianceshujufenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongguanli"></use>
                </svg>
                <div class="name">系统管理</div>
                <div class="code-name">#icon-xitongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxitongzhi"></use>
                </svg>
                <div class="name">通知公告</div>
                <div class="code-name">#icon-xiaoxitongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibanjiankongguanli"></use>
                </svg>
                <div class="name">值班监测</div>
                <div class="code-name">#icon-zhibanjiankongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibanrenyuanguanli"></use>
                </svg>
                <div class="name">值班人员</div>
                <div class="code-name">#icon-zhibanrenyuanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongzuotai"></use>
                </svg>
                <div class="name">工作台</div>
                <div class="code-name">#icon-gongzuotai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chagangjilu"></use>
                </svg>
                <div class="name">查岗记录</div>
                <div class="code-name">#icon-chagangjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chagangtongji"></use>
                </svg>
                <div class="name">查岗统计</div>
                <div class="code-name">#icon-chagangtongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danweixinxi"></use>
                </svg>
                <div class="name">单位信息</div>
                <div class="code-name">#icon-danweixinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhangfenxi"></use>
                </svg>
                <div class="name">故障分析</div>
                <div class="code-name">#icon-guzhangfenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhangshijian"></use>
                </svg>
                <div class="name">故障事件</div>
                <div class="code-name">#icon-guzhangshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianceshijian"></use>
                </svg>
                <div class="name">监测事件</div>
                <div class="code-name">#icon-jianceshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianceshuju"></use>
                </svg>
                <div class="name">监测数据</div>
                <div class="code-name">#icon-jianceshuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loubaoshijian"></use>
                </svg>
                <div class="name">漏报事件</div>
                <div class="code-name">#icon-loubaoshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipinguanli"></use>
                </svg>
                <div class="name">视频管理</div>
                <div class="code-name">#icon-shipinguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wulianguanli"></use>
                </svg>
                <div class="name">物联管理</div>
                <div class="code-name">#icon-wulianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaofangshuiyuan"></use>
                </svg>
                <div class="name">消防水源</div>
                <div class="code-name">#icon-xiaofangshuiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaokongshichagang"></use>
                </svg>
                <div class="name">消控室查岗</div>
                <div class="code-name">#icon-xiaokongshichagang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhuanfenxi"></use>
                </svg>
                <div class="name">隐患分析</div>
                <div class="code-name">#icon-yinhuanfenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhuanshijian"></use>
                </svg>
                <div class="name">隐患事件</div>
                <div class="code-name">#icon-yinhuanshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhenshihuojingshijian"></use>
                </svg>
                <div class="name">真实火警事件</div>
                <div class="code-name">#icon-zhenshihuojingshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibanfenxi"></use>
                </svg>
                <div class="name">值班分析</div>
                <div class="code-name">#icon-zhibanfenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baojingfenxi"></use>
                </svg>
                <div class="name">报警分析</div>
                <div class="code-name">#icon-baojingfenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baojingshijian"></use>
                </svg>
                <div class="name">报警事件</div>
                <div class="code-name">#icon-baojingshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianzhuxinxi"></use>
                </svg>
                <div class="name">建筑信息</div>
                <div class="code-name">#icon-jianzhuxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaofangjingli"></use>
                </svg>
                <div class="name">消防警力</div>
                <div class="code-name">#icon-xiaofangjingli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaokongshiguanli"></use>
                </svg>
                <div class="name">消控室管理</div>
                <div class="code-name">#icon-xiaokongshiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-xiaofangzhengheshiyujing"></use>
                </svg>
                <div class="name">消防证核实（预警）</div>
                <div class="code-name">#icon-a-xiaofangzhengheshiyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-laidianjilu"></use>
                </svg>
                <div class="name">来电记录</div>
                <div class="code-name">#icon-laidianjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibanshijian"></use>
                </svg>
                <div class="name">值班事件</div>
                <div class="code-name">#icon-zhibanshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-BBxinhaodengju"></use>
                </svg>
                <div class="name">BB信号灯具</div>
                <div class="code-name">#icon-BBxinhaodengju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ABmonijiankong"></use>
                </svg>
                <div class="name">AB模拟监控</div>
                <div class="code-name">#icon-ABmonijiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DAshipinjiance"></use>
                </svg>
                <div class="name">DA视频检测</div>
                <div class="code-name">#icon-DAshipinjiance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DBweibo"></use>
                </svg>
                <div class="name">DB微波</div>
                <div class="code-name">#icon-DBweibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-HCKVM"></use>
                </svg>
                <div class="name">HC KVM</div>
                <div class="code-name">#icon-a-HCKVM</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangongpeitao"></use>
                </svg>
                <div class="name">办公配套</div>
                <div class="code-name">#icon-bangongpeitao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-IBdayinji"></use>
                </svg>
                <div class="name">IB打印机</div>
                <div class="code-name">#icon-IBdayinji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongxinpingtai"></use>
                </svg>
                <div class="name">中心平台</div>
                <div class="code-name">#icon-zhongxinpingtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_bijiben"></use>
                </svg>
                <div class="name">061_笔记本</div>
                <div class="code-name">#icon-a-061_bijiben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_dangan-21"></use>
                </svg>
                <div class="name">061_档案-21</div>
                <div class="code-name">#icon-a-061_dangan-21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_faxian"></use>
                </svg>
                <div class="name">061_发现</div>
                <div class="code-name">#icon-a-061_faxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_gengduo"></use>
                </svg>
                <div class="name">061_更多</div>
                <div class="code-name">#icon-a-061_gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_bianji-20"></use>
                </svg>
                <div class="name">061_编辑-20</div>
                <div class="code-name">#icon-a-061_bianji-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_gouwu-12"></use>
                </svg>
                <div class="name">061_购物-12</div>
                <div class="code-name">#icon-a-061_gouwu-12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_jiankong"></use>
                </svg>
                <div class="name">061_监控</div>
                <div class="code-name">#icon-a-061_jiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_jianzhu-17"></use>
                </svg>
                <div class="name">061_建筑-17</div>
                <div class="code-name">#icon-a-061_jianzhu-17</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_laba"></use>
                </svg>
                <div class="name">061_喇叭</div>
                <div class="code-name">#icon-a-061_laba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_shuben"></use>
                </svg>
                <div class="name">061_书本</div>
                <div class="code-name">#icon-a-061_shuben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_shoucang-23"></use>
                </svg>
                <div class="name">061_收藏-23</div>
                <div class="code-name">#icon-a-061_shoucang-23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_jinbi"></use>
                </svg>
                <div class="name">061_金币</div>
                <div class="code-name">#icon-a-061_jinbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_guangbo"></use>
                </svg>
                <div class="name">061_广播</div>
                <div class="code-name">#icon-a-061_guangbo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_shuqian"></use>
                </svg>
                <div class="name">061_书签</div>
                <div class="code-name">#icon-a-061_shuqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_shangpin"></use>
                </svg>
                <div class="name">061_商品</div>
                <div class="code-name">#icon-a-061_shangpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_shuxie"></use>
                </svg>
                <div class="name">061_书写</div>
                <div class="code-name">#icon-a-061_shuxie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_ditu"></use>
                </svg>
                <div class="name">061_地图</div>
                <div class="code-name">#icon-a-061_ditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_shuju-09"></use>
                </svg>
                <div class="name">061_数据-09</div>
                <div class="code-name">#icon-a-061_shuju-09</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_tongdao"></use>
                </svg>
                <div class="name">061_通道</div>
                <div class="code-name">#icon-a-061_tongdao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_wangluo"></use>
                </svg>
                <div class="name">061_网络</div>
                <div class="code-name">#icon-a-061_wangluo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_kuaidi"></use>
                </svg>
                <div class="name">061_快递</div>
                <div class="code-name">#icon-a-061_kuaidi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_wenjian"></use>
                </svg>
                <div class="name">061_文件</div>
                <div class="code-name">#icon-a-061_wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_xiuxian"></use>
                </svg>
                <div class="name">061_休闲</div>
                <div class="code-name">#icon-a-061_xiuxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_wode-27"></use>
                </svg>
                <div class="name">061_我的-27</div>
                <div class="code-name">#icon-a-061_wode-27</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_xiaoxi"></use>
                </svg>
                <div class="name">061_消息</div>
                <div class="code-name">#icon-a-061_xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_xinjian"></use>
                </svg>
                <div class="name">061_信件</div>
                <div class="code-name">#icon-a-061_xinjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-061_tansuo"></use>
                </svg>
                <div class="name">061_探索</div>
                <div class="code-name">#icon-a-061_tansuo</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
